<app-manager-top></app-manager-top>
<app-manager-side-nav></app-manager-side-nav>
<div id="page-wrapper">
    <div id="page-inner">
        <div class="row">
            <div class="col-md-12">
                <h1 class="page-header">
                    用户管理
                </h1>
            </div>
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="option-field">
                                <!--  search box -->
                                <div class="search-box">
                                    <label for="search-input">搜索用户:&nbsp;&nbsp;</label>
                                    <input id="search-input" type="text" [(ngModel)]="inputUserName"
                                           (input)="searchUser()">
                                </div>
                                <!--  country options -->
                                <div class="country-option">
                                    <label for="country">所在国家:&nbsp;&nbsp;</label>
                                    <select name="country" id="country" [(ngModel)]="selectCountry">
                                        <ng-template ngFor let-countryName [ngForOf]="countries">
                                            <option value="{{countryName}}"
                                                    [selected]="countryName===''">{{countryName}}</option>
                                        </ng-template>
                                    </select>
                                </div>
                                <input type="button" (click)="searchUser()" value="查询">
                            </div>
                            <div class="info-field grid-container">
                                <table>
                                    <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>E-mail</th>
                                        <th>Phone</th>
                                        <th>Country</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <ng-template ngFor let-user [ngForOf]="usersVO?.usersList" let-i="index">
                                        <tr *ngIf="!deleteUsers.includes(user?.userId)" id="{{i}}">
                                            <td><input type="text" value="{{user?.userId}}" [style]="editing==(i+'') ? 'border-radius: 5px;border: 1px black solid;':''"/></td>
                                            <td><input type="text" value="{{user?.email}}" [style]="editing==(i+'') ? 'border-radius: 5px;border: 1px black solid;':''"></td>
                                            <td><input type="text" value="{{user?.phone}}" [style]="editing==(i+'') ? 'border-radius: 5px;border: 1px black solid;':''"></td>
                                            <td><input type="text" value="{{user?.country}}" [style]="editing==(i+'') ? 'border-radius: 5px;border: 1px black solid;':''"></td>
                                            <td>
                                                <div class="operator">
                                                    <button id="save-button" [style.display]="editing==(i+'') ? '':'none'"
                                                            [class.operator-enabled]="editing" (click)="saveRow(i+'')">
                                                        保 存
                                                    </button>
                                                    <button id="cancel-button" [style.display]="editing==(i+'') ? '':'none'"
                                                            [class.operator-enabled]="editing" (click)="cancelRow(i+'')">
                                                        取 消
                                                    </button>
                                                    <button id="edit-button"
                                                            [class.operator-enabled]="isEditable()&&!editing"
                                                            (click)="editRow(i+'')">
                                                        编 辑
                                                    </button>
                                                    <button id="delete-button"
                                                            [class.operator-enabled]="isDeletable()&&!editing"
                                                            (click)="dropRow(user?.userId)">
                                                        删 除
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    </ng-template>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer>
        </footer>
    </div>
</div>
